<template>
	<view class="pages-mine rel">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="我的"
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<!-- <image src="https://lbqny.migugu.com/admin/jiazheng/mine-top.png" mode="aspectFill" class="mine-bg abs"></image> -->
		<!-- <view class="mine-bg abs"></view> -->
		<view class="rel pt-md">
			<view class="user-info radius-16 fill-base pd-lg">
				<view class="flex-y-center">
					<view class="user-header-box rel pb-sm">
						<image :src="coachInfo.work_img" mode="aspectFill" class="user-header"></image>
						<view class="abs auth-status flex-center c-base" 
						:style="{background:coachInfo.is_work ? primaryColor : '#ccc'}">
						{{coachInfo.is_work ? `已上线` : `未上线`}}</view>
					</view>
					<view class="pl-md flex-1">
						<view class="flex-between">
							<view class="flex-center">
								<view class="f-ms-title text-bold user-name pr-sm ellipsis max-330">{{coachInfo.name}}</view>
								<view class="user-tag" :style="{color: primaryColor,border: `1px solid ${primaryColor}` }">已认证</view>
							</view>
							<i class="iconfont iconbianji" style="font-size: 20px;" @tap="$util.goUrl({url: `/user/pages/service-apply`})"></i>
						</view>
						<view class="f-paragraph pt-sm user-phone">{{coachInfo.mobile}}(手机号)</view>
					</view>
				</view>
				<view class="pt-lg flex-between">
					<text class="f-paragraph">本月概况</text>
					<view class="flex-center" @tap="$util.goUrl({url: `/user/pages/statistics`})">
						<text class="pr-sm f-caption c-text">查看统计</text>
						<i class="iconfont icon-right text-bold c-caption" style="font-size: 13px;"></i>
					</view>
				</view>
			</view>
			
		</view>
		<view class="mt-md radius-20 fill-base item-child">
			<view class="pl-lg pt-lg flex-between pr-lg">
				<view class="flex-center">
					<text class="f-paragraph text-bold c-434343">我的订单</text>
					<text class="f-caption c-caption">（用户选择标准服务下单）</text>
				</view>
				<view class="flex-center" @tap="$util.goUrl({url: `/pages/order?tab=0`})">
					<text class="f-caption c-text">查看全部</text>
					<i class="iconfont c-text icongengduo" style="font-size: 12px;margin-left: 6rpx;"></i>
				</view>
			</view>
			<view class="flex-warp order-list">
				<view class="flex-1 flex-column flex-center rel" v-for="(item,index) in orderList" :key="index" 
				@tap="$util.goUrl({url: `/pages/order?tab=${item.tab}`})">
					<view class="flex-center rel order-item-icon">
						<i class="iconfont" :class="item.icon" :style="{color: primaryColor}"></i>
						<view class="icon-bg abs" :style="{background: primaryColor}"></view>
					</view>
					<view class="f-caption pt-sm">{{item.title}}</view>
					<view class="abs order-num fill-warning c-base f-little flex-center" v-if="item.number">{{item.number}}</view>
				</view>
			</view>
		</view>
		<view class="mt-lg radius-20 fill-base item-child" v-if="configInfo.plugAuth.demand">
			<view class="pl-lg pt-lg flex-between pr-lg">
				<view class="flex-center">
					<text class="f-paragraph text-bold c-434343">需求订单</text>
					<text class="f-caption c-caption">（用户发布需求下单）</text>
				</view>
				<view class="flex-center" @tap="$util.goUrl({url: `/demand/pages/order/list?tab=0`})">
					<text class="f-caption c-text">查看全部</text>
					<i class="iconfont c-text icongengduo" style="font-size: 12px;margin-left: 6rpx;"></i>
				</view>
			</view>
			<view class="flex-warp order-list">
				<view class="flex-column flex-center rel" v-for="(item,index) in demandList" :key="index" 
				@tap="$util.goUrl({url: `/demand/pages/order/list?tab=${item.tab}`})" style="width: 20%;">
					<view class="flex-center rel order-item-icon">
						<i class="iconfont" :class="item.icon" :style="{color: primaryColor}"></i>
						<view class="icon-bg abs" :style="{background: primaryColor}"></view>
					</view>
					<view class="f-caption pt-sm">{{item.title}}</view>
					<view class="abs order-num fill-warning c-base f-little flex-center" v-if="item.number">{{item.number}}</view>
				</view>
			</view>
		</view>
		<view class="mt-md fill-base radius-20 menu-list">
			<view class="flex-between menu-item" v-for="(item,index) in menuList" :key="index" @tap="goUrl(item.link)">
				<view class="flex-center menu-item-icon" :style="{background: item.color}">
					<i class="iconfont c-base" :class="item.icon" style="font-size: 18px;"></i>
				</view>
				<view class="pl-lg f-title flex-1 text-bold">{{item.title}}</view>
				<i class="iconfont icongengduo" style="font-size: 12px;color: #C8CDD3;"></i>
			</view>
		</view>
		<uni-popup ref="popup_box" type="center" :custom="true">
			<view class="popup-box fill-base pl-lg pr-lg radius-16 pt-md pb-lg">
				<view class="f-title flex-center h-80 text-bold rel">客服联系方式</view>
				<view class="flex-center flex-column">
					<view class="pt-lg flex-y-center" v-if="coachInfo.service_tel">
						<text class="f-paragraph text-bold ">公司客服</text>
						<text class="f-paragraph c-paragraph pl-lg" style="width: 250rpx;">{{coachInfo.service_tel}}</text>
						<text class="f-paragraph" :style="{color: primaryColor}" @tap="callPhone(coachInfo.service_tel)">拨打</text>
					</view>
					<view class="pb-lg pt-lg flex-y-center" v-if="configInfo.contacts_mobile">
						<text class="f-paragraph text-bold ">平台客服</text>
						<text class="f-paragraph c-paragraph pl-lg" style="width: 250rpx;">{{configInfo.contacts_mobile}}</text>
						<text class="f-paragraph" :style="{color: primaryColor}" @tap="callPhone(configInfo.contacts_mobile)">拨打</text>
					</view>
				</view>
				<view class="flex-center pt-lg pb-lg">
					<view class="radius-10 service-btn flex-center f-desc"
					:style="{color: `#fff`, background: primaryColor}" 
					@tap.stop="$refs.popup_box.close()">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- #ifdef APP-PLUS -->
			<openAuth type="phone" ref="app_check_item"></openAuth>
		<!-- #endif -->
		
		<view class="space-footer"></view>
		<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
		<tabbar :cur="5"></tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	import openAuth from "@/components/open-auth.vue"
	
	export default {
		components: {
			tabbar,
			openAuth
		},
		data() {
			return {
				orderList: [
					{icon: 'icondaifukuan1', title: '待上门', tab: 1, type: 'wait', number: 0},
					{icon: 'icondaishiyong', title: '待开始', tab: 2, type: 'sering', number: 0},
					{icon: 'icondaifuwu', title: '服务中', tab: 3},
					{icon: 'icondingdan-yiwancheng', title: '已完成', tab: 4},
					{icon: 'icontuikuan', title: '已取消', tab: 5}
				],
				demandList: [
					{icon: 'icondaifukuan1', title: '待上门', tab: 1, type: 'demand_wait', number: 0},
					{icon: 'icondaishiyong', title: '待开始', tab: 2, type: 'demand_sering', number: 0},
					{icon: 'icondaifuwu', title: '服务中', tab: 3, number: 0},
					{icon: 'icondingdan-yiwancheng', title: '已完成', tab: 4},
					{icon: 'icontuikuan', title: '已取消', tab: 5}
				],
				menuList: [
					// {color: '#54AAFF',icon: 'iconbangdingfenxiaoyuan', title: '服务人员认证',link: '/user/pages/service-apply'},
					{color: '#8285F8',icon: 'iconqiyeruzhu', title: '编辑公司',link: '/user/pages/company-apply', isHide: false},
					{color: '#8285F8',icon: 'iconzijinzhanghu', title: '公司资产',link: '/user/pages/wallet/index'},
					{color: '#8285F8',icon: 'iconlicai', title: '我的钱包',link: '/user/pages/stored/index?type=1'},
					{color: '#6BCE7C',icon: 'iconfankui', title: '意见反馈',link: '/user/pages/feedback/box'},
					{color: '#FF993A',icon: 'icondianhua', title: '联系客服',link: 'contacts'},
					// {color: '#54AAFF',icon: 'iconxiazaizhongxin', title: 'app下载',link: '/user/pages/download'},
					{color: '#54AAFF',icon: 'iconmima', title: '后台账密',link: '/user/pages/account'},
					{color: '#FF993A',icon: 'icongongnengshezhi1', title: '功能设置',link: '/user/pages/use-set'},
					{color: '#FF993A',icon: 'iconanquan', title: '账号安全',link: '/user/pages/account-security'},
				],
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			coachInfo: state => state.user.coachInfo,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			this.initIndex()
		},
		onShow() {
			// #ifdef APP-PLUS
			this.$util.isCheckAuth({type: 'phone'}).then(res => {
				console.log(res , '========> phone')
				if(!res){
					this.$refs.app_check_item.close()
				}
			})
			// #endif
		},
		async onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo','getCoachInfo']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					await this.getConfigInfo()
				}
				await this.getCoachInfo()
				this.getOrderCount()
				let {
					identity = 0,
					company_id = 0
				} = this.coachInfo
				if(identity == 2 || identity == 3 || !company_id){
					let companyInd = this.menuList.findIndex(item => {
						return item.title == '编辑公司'
					})
					if(companyInd != -1){
						this.menuList.splice(companyInd,1)
					}
				}
				if(identity == 3 || !company_id){
					let walletInd = this.menuList.findIndex(item => {
						return item.title == '公司资产'
					})
					if(walletInd != -1){
						this.menuList.splice(walletInd,1)
					}
				}
				if(identity == 3 || !company_id){
					let accountInd = this.menuList.findIndex(item => {
						return item.title == '后台账密'
					})
					if(accountInd != -1){
						this.menuList.splice(accountInd,1)
					}
				}
				this.$util.hideAll()
			},
			async getOrderCount(){
				let data = await this.$api.user.getOrderCount()
				let arr = ['orderList','demandList']
				arr.forEach(v => {
					this[v].forEach(item => {
						if(item.type){
							item.number = data[item.type]
						}
					})
				})
			},
			initRefresh(){
				this.initIndex(true)
			},
			goUrl(url){
				if(url == 'contacts'){
					this.$refs.popup_box.open()
					//this.$util.goUrl({openType: 'call', url: this.configInfo.contacts_mobile})
					return
				}
				if(url){
					this.$util.goUrl({url})
				}
			},
			async callPhone(url){
				// #ifdef APP-PLUS
				let [,data] = await uni.getSystemInfo()
				if(data.platform !== 'ios'){
					await this.$util.isCheckAuth({type: 'phone'}).then(res => {
						console.log(res , '========> phone')
						if(res){
							this.$refs.app_check_item.open()
						}
					})
				}
				// #endif
				uni.makePhoneCall({
					phoneNumber: url,
					success:(res)=>{
						// #ifdef APP-PLUS
						this.$util.isCheckAuth({type: 'phone'}).then(res => {
							console.log(res , '========> phone')
							if(!res){
								this.$refs.app_check_item.close()
							}
						})
						// #endif
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						this.$refs.app_check_item.close()
						// #endif
					}
				})
			}
		},
	}
</script>


<style lang="scss">
	.pages-mine {
		.mine-bg{
			height: 466rpx;
			/* #ifdef H5 */
			top: 0;
			/* #endif */
			/* #ifndef H5 */
			top: 48px;
			/* #endif */
			left: 0;
			width: 750rpx;
			z-index: -1;
			background: linear-gradient(to right, #FEE4B4 0%, #FDBF92 100%);
		}
		.user-header{
			width: 120rpx;
			height: 120rpx;
			border-radius: 120rpx;
		}
		.user-info{
			margin: 0 25rpx 0 25rpx;
			.user-tag{
				min-width: 92rpx;
				height: 36rpx;
				padding: 0 10rpx;
				font-size: 24rpx;
				border-radius: 3px;
			}
		}
		.user-name{
			color: #4E1F01;
		}
		.user-phone{
			color: #7E463A;
		}
		
		.nav-item{
			height: 253rpx;
			.nav-item-integral, .nav-item-police{
				height: 85rpx;
			}
			.nav-item-balance{
				height: 167rpx;
			}
			.police-icon{
				width: 45rpx;
				height: 45rpx;
				border-radius: 45rpx;
				background: linear-gradient(360deg, #E43308 0%, #ED380A 100%);
			}
		}
		.c-5f5f5f{
			color: #5f5f5f;
		}
		.c-434343{
			color: #434343;
		}
		.order-list{
			padding: 28rpx 0 35rpx 0;
		}
		.order-item-icon{
			width: 60rpx;
			height: 60rpx;
			.icon-bg{
				width: 60rpx;
				height: 60rpx;
				border-radius: 60rpx;
				opacity: 0.1;
			}
		}
		.item-child{
			margin: 20rpx 25rpx 0 25rpx;
		}
		
		.menu-list{
			margin: 20rpx 25rpx 0 25rpx;
			padding: 40rpx 30rpx 0 35rpx;
			.menu-item{
				padding-bottom: 40rpx;
			}
			.menu-item-icon{
				width: 60rpx;
				height: 60rpx;
				border-radius: 60rpx;
			}
		}
		.auth-status{    
			min-width: 104rpx;
		    height: 32rpx;
		    padding: 0 10rpx;
		    font-size: 20rpx;
			border-radius: 4rpx;
			bottom: 0;
			left: 50%;
			transform: translate(-50% , 0);
		}
		.popup-box{
			width: 620rpx;
			.service-btn{
				width: 222rpx;
				height: 62rpx;
				color: #5B5B5B;
			}
		}
		.order-num{
			top: -10rpx;
			height: 30rpx;
			min-width: 30rpx;
			border-radius: 30rpx;
			right: 20rpx;
		}
	}
</style>
